import React, { useRef, useState } from "react";
import { connect } from "react-redux";
import action from "../../../store/Actions";
import * as api from "../../../api/Administrator";
import MyAlert from "../../../component/MyAlert";
import { Button, message, Input, Select } from "antd";
import "./index.less";
const System = (props) => {
  /**
   * 上传logo图片
   */
  //获取文件对象
  const fileObj: any = useRef();
  //图片
  const image: any = useRef();
  //设置文件大小
  const chunkSize = 1024 * 1024 * 20;
  //切换图片方法
  const handleClickImage = () => {
    fileObj.current.click();
    fileObj.current.addEventListener("change", (e) => {
      let files = e.target.files[0];
      let f = new FileReader();
      f.readAsDataURL(files);
      f.onload = function (e) {
        image.current.src = e.target.result;
      };
    });
  };

  //上传logo图片
  const handleUpload = (index = 0) => {
    const { merge } = props;
    //获取上传文件
    const file = fileObj.current.files[0];
    if (file.size > chunkSize) {
      message.error("logo大小不能超过20KB,请重新选择并上传!");
      return;
    }
    //[文件名,文件后缀]
    const [fname, fext] = file.name.split(".");
    //获取当前片的起始字节
    const start = index * chunkSize;
    if (start > file.size) {
      //当超出文件大小,停止递归上传
      //请求整合
      merge({ name: file.name });
      message.success("logo已经上传成功!");
      return;
    }
    const blob = file.slice(start, start + chunkSize);
    //为每片进行命名
    const blobName = `${fname}.${index}.${fext}`;
    const blobFile = new File([blob], blobName);
    const formData = new FormData();
    formData.append("file", blobFile);
    api.upload(formData).then((res) => {
      console.log(res);
      //递归分片上传
      handleUpload(++index);
    });
  };
  //修改名称
  const [title, setTitle] = useState("");
  const [edit, setEdit] = useState(false);
  const [name, setName] = useState("");
  const okEdit = () => {
    const { editVersionTitle } = props;
    editVersionTitle({ title: name });
    setEdit(false);
    setName("");
  };
  //修改登录账号
  const [login, setLogin] = useState("");
  const [editLogin, setEditLogin] = useState(false);
  const okEditLogin = () => {
    const { editVersionLoginRoot } = props;
    editVersionLoginRoot({ login_root: login });
    setEditLogin(false);
    setLogin("");
  };
  //修改企业名称
  const [company, setCompany] = useState("");
  const [editCompany, setEditCompany] = useState(false);
  const okEditCompany = () => {
    const { editVersionCompanyName } = props;
    editVersionCompanyName({ company_name: company });
    setEditCompany(false);
    setCompany("");
  };
  //修改教学周期时长
  const { Option } = Select;
  let DurationOption = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
  ];
  const [duration, setDuration] = useState("");
  const [editDuration, setEditDuration] = useState(false);
  function handleChange(value) {
    setDuration(value);
  }
  const okEditDuration = () => {
    const { editVersionDuration } = props;
    editVersionDuration({duration:duration});
    setEditDuration(false);
  };
  return (
    <div className="System">
      <div className="logo_upload">
        <h3>Logo上传</h3>
        <ul>
          <li>
            <div className="left">
              <h3>logo</h3>
            </div>
            <div className="right">
              <img
                ref={image}
                src={props.version.logo}
                alt=""
                onClick={handleClickImage}
              />
              <input type="file" ref={fileObj} />
              <Button
                type="primary"
                onClick={() => {
                  handleUpload(0);
                }}
              >
                上传logo图片
              </Button>
              <span>建议尺寸48*48,大小不超过20KB</span>
            </div>
          </li>
          <li>
            <div className="left">
              <h3>名称</h3>
            </div>
            <div className="right">
              <span>{props.version.title}</span>
              <span
                onClick={() => {
                  setEdit(true);
                  setTitle("修改名称");
                }}
              >
                修改
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div className="info">
        <h3>账号信息</h3>
        <ul>
          <li>
            <div className="left">
              <h3>登录账号 :</h3>
            </div>
            <div className="right">
              <span>{props.version.login_root}</span>
              <span
                onClick={() => {
                  setEditLogin(true);
                  setTitle("修改登录账号");
                }}
              >
                修改登录账号
              </span>
            </div>
          </li>
          <li>
            <div className="left">
              <h3>企业名称 :</h3>
            </div>
            <div className="right">
              <span>{props.version.company_name}</span>
              <span
                onClick={() => {
                  setEditCompany(true);
                  setTitle("修改企业名称");
                }}
              >
                修改
              </span>
            </div>
          </li>
          <li>
            <div className="left">
              <h3>手机号码 :</h3>
            </div>
            <div className="right">
              <span>17600332742</span>
            </div>
          </li>
          <li>
            <div className="left">
              <h3>注册时间 :</h3>
            </div>
            <div className="right">
              <span>2021-10-26 18:47:54</span>
            </div>
          </li>
          <li>
            <div className="left">
              <h3>教学周期时长 :</h3>
            </div>
            <div className="right">
              <span>{ props.version.duration }</span>
              <span
                onClick={() => {
                  setEditDuration(true);
                  setTitle("修改教学周期时长");
                }}
              >
                修改
              </span>
            </div>
          </li>
        </ul>
      </div>
      <MyAlert
        isModalVisible={edit}
        handleOk={okEdit}
        handleCancel={() => {
          setEdit(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div className="edit">
          <Input
            placeholder={props.version.title}
            onChange={(e) => {
              setName(e.target.value);
            }}
          />
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={editLogin}
        handleOk={okEditLogin}
        handleCancel={() => {
          setEditLogin(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div className="edit">
          <Input
            placeholder={props.version.login_root}
            onChange={(e) => {
              setLogin(e.target.value);
            }}
          />
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={editCompany}
        handleOk={okEditCompany}
        handleCancel={() => {
          setEditCompany(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div className="edit">
          <Input
            placeholder={props.version.company_name}
            onChange={(e) => {
              setCompany(e.target.value);
            }}
          />
        </div>
      </MyAlert>
      <MyAlert
        isModalVisible={editDuration}
        handleOk={okEditDuration}
        handleCancel={() => {
          setEditDuration(false);
        }}
        title={title}
        cancelText="取消"
        okText="确定"
      >
        <div className="edit">
          <span>教学周期时长 : </span>
          <Select
            defaultValue={props.version.duration}
            style={{ width: 120, marginLeft: 10 }}
            onChange={handleChange}
          >
            {DurationOption.map((item) => {
              return (
                <Option key={item} value={item + "天"}>
                  {item + "天"}
                </Option>
              );
            })}
          </Select>
        </div>
      </MyAlert>
    </div>
  );
};

const mapStateToProps = (state) => {
  return state.administratorReducer;
};
export default connect(mapStateToProps, action.administratorActions)(System);
